<!--
@name:detailDialog
@author:Zhenglei
@date:16:54
@description:detailDialog
@update:2022/5/1116:54
-->
<template>
  <div>
    <el-dialog :visible.sync="visible"
               title="处方转换"
               width="70%"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="submitData"
               label-position="right"
               label-width="180px"
               ref="formModelRef"
               :rules='formModelRules'>
        <el-form-item label="拒绝理由：" v-if="dataObj.optionType==='edit'">
          <p style="color: #8b7373">{{ submitData.returnReason }}</p>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="管理对象：">
              <p>{{ dataObj.userName }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传时间：">
              <p>{{ formatterDate(dataObj.uploadTime) }}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="处方内容：">
          <el-image :src="dataObj.imgUrl" style="width: 160px;height: 160px" :preview-src-list="[dataObj.imgUrl]"/>
        </el-form-item>

        <el-form-item label="处方类型：" prop="prescriptionType">
          <el-select v-model="submitData.prescriptionType"
                     class="w-300"
                     @change="handleChangeType"
                     placeholder="请选择处方类型">
            <el-option v-for="item in prescriptionList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开方医生所属医院：" prop="doctorHospital">
              <el-input class="w-300" v-model="submitData.doctorHospital" placeholder="请输入所属医院" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开方医生所属科室：" prop="doctorDepartment">
              <el-input class="w-300" v-model="submitData.doctorDepartment" placeholder="请输入所属科室" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开方医生：" prop="doctorName">
              <el-input class="w-300" v-model="submitData.doctorName" placeholder="请输入开方医生" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开方时间：" prop="openTime">
              <el-date-picker type="datetime"
                              class="w-300"
                              v-model="submitData.openTime"
                              placeholder="请选择开方时间"
                              value-format="timestamp"
                              clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="处方有效期：">
          <el-date-picker type="date"
                          class="w-400"
                          v-model="submitData.expireTime"
                          placeholder="请选择处方有效期"
                          value-format="timestamp"
                          clearable/>

        </el-form-item>

        <el-form-item label="确诊病症：" prop="themeId">
          <el-select v-model="submitData.themeId"
                     class="w-400"
                     clearable
                     filterable
                     placeholder="请选择确诊病症">
            <el-option v-for="item in diseaseList"
                       :key="item.id"
                       :label="item.diseaseName"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="过敏史：" prop="allergies">
          <el-input class="w-400" v-model="submitData.allergies" type="textarea" placeholder="请输入过敏史" clearable/>
        </el-form-item>
        <el-form-item label="临床诊断：" prop="diagnosticResult">
          <el-input class="w-400" v-model="submitData.diagnosticResult" type="textarea" placeholder="请输入临床诊断"
                    clearable/>
        </el-form-item>
        <el-form-item label="医嘱：">
          <el-input class="w-400" v-model="submitData.medicalAdvice" type="textarea" placeholder="请输入医嘱" clearable/>
        </el-form-item>
        <!--中成药西药-->
        <div v-if="submitData.prescriptionType===2">
          <el-form-item>
            <el-button type="primary"
                       @click="handleOption('addWestern')">新增
            </el-button>
          </el-form-item>
          <el-form-item>
            <element-table
              :columns="columnsWestern"
              :data="tableData">
              <template v-slot:option="{row}">
                <el-button type="primary"
                           @click="handleOption('editWestern', row)">编辑
                </el-button>
                <el-button type="info"
                           @click="handleOption('delWestern', row)">删除
                </el-button>
              </template>
            </element-table>

          </el-form-item>
        </div>
        <!--中药-->
        <div v-if="submitData.prescriptionType===1">
          <el-form-item>
            <el-button type="primary"
                       @click="handleOption('addTradition')">新增
            </el-button>
          </el-form-item>
          <el-form-item>
            <element-table
              :columns="columnsTraditional"
              :data="tableData">
              <template v-slot:option="{row,index}">
                <el-button type="primary"
                           @click="handleOption('editTradition', row,index)">编辑
                </el-button>
                <el-button type="info"
                           @click="handleOption('delTradition', row)">删除
                </el-button>
              </template>
            </element-table>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="总计：" prop="number"
                            :rules="submitData.prescriptionType===1?formModelRules.number:[{required: false}]">
                <el-input class="w-300" v-model="submitData.number" placeholder="请输入数量" clearable>
                  <el-button type="primary" slot="append">剂</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="煎煮方式：" prop="decoctionMethod"
                            :rules="submitData.prescriptionType===1?formModelRules.decoctionMethod:[{required: false}]">
                <el-select v-model="submitData.decoctionMethod"
                           class="w-300"
                           placeholder="请选择煎煮方式">
                  <el-option v-for="item in prescriptionConfig[4]"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="每日剂数：" prop="dayNum"
                            :rules="submitData.prescriptionType===1?formModelRules.dayNum:[{required: false}]">
                <el-input class="w-300" v-model="submitData.dayNum" placeholder="请输入数量" clearable>
                  <el-button type="primary" slot="append">剂</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用法：" prop="usageMethod"
                            :rules="submitData.prescriptionType===1?formModelRules.usageMethod:[{required: false}]">
                <el-select v-model="submitData.usageMethod"
                           class="w-300"
                           placeholder="请选择用法">
                  <el-option v-for="item in prescriptionConfig[5]"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="频次：" prop="frequency"
                            :rules="submitData.prescriptionType===1?formModelRules.frequency:[{required: false}]">
                <el-select v-model="submitData.frequency"
                           class="w-300"
                           placeholder="请选择频次">
                  <el-option v-for="item in prescriptionConfig[3]"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="每次用量：" prop="timeNum"
                            :rules="submitData.prescriptionType===1?formModelRules.timeNum:[{required: false}]">
                <el-input class="w-300" v-model="submitData.timeNum" placeholder="请输入每次用量" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="服用时间：" prop="takingTime"
                        :rules="submitData.prescriptionType===1?formModelRules.takingTime:[{required: false}]">
            <el-select v-model="submitData.takingTime"
                       class="w-300"
                       placeholder="请选择服用时间">
              <el-option v-for="item in prescriptionConfig[2]"
                         :key="item"
                         :label="item"
                         :value="item">
              </el-option>
            </el-select>
          </el-form-item>


        </div>
        <!--检测处方-->
        <div v-if="submitData.prescriptionType===4">
          <el-form-item label="补充说明：">
            <el-input class="w-400" v-model="submitData.remark" type="textarea" placeholder="请输入补充说明" clearable/>
          </el-form-item>
          <el-form-item label="设备信息：" prop="drugName">
            <el-input class="w-400" v-model="submitData.drugName" type="textarea" placeholder="请输入设备信息" clearable/>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="监测天数：" prop="number">
                <el-input class="w-300" v-model="submitData.number" placeholder="请输入监测天数" clearable>
                  <el-button type="primary" slot="append">天</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="每天监测次数：" prop="dayNum">
                <el-input class="w-300" v-model="submitData.dayNum" placeholder="请输入每天监测次数" clearable>
                  <el-button type="primary" slot="append">次</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </div>
      </el-form>
      <p align="center">
        <el-button @click="modalClose"
                   type="info">取 消
        </el-button>
        <el-button type="primary"
                   v-prevent-re-click
                   @click="handleOption('save')">保 存
        </el-button>
      </p>

    </el-dialog>
    <add-tradition-dialog :listdata="listdata"
                          v-if="showAddTradtionDialog"
                          :visible.sync="showAddTradtionDialog"
                          @handleResultData="handleResultData"/>
    <add-western-dialog :listdata="listdata"
                        v-if="showAddWesternDialog"
                        :visible.sync="showAddWesternDialog"
                        @handleResultData="handleResultData"/>
  </div>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";
import addTraditionalDialog from "./addTraditionalDialog";
import addWesternDialog from "./addWesternDialog";

export default {
  name: "detailDialog",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      url: 'https://img1.baidu.com/it/u=3883901410,74560379&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
      submitData: {
        imgPrescriptionId: this.dataObj.id,
        doctorHospital: '',
        prescriptionType: '',
        doctorDepartment: '',
        doctorName: '',
        openTime: '',
        expireTime: '',
        allergies: '',
        medicalAdvice: '',
        diagnosticResult: '',
        themeId: '',
        detailList: [],
        usagesData: '',
        usages: '',
        remark: '',
        drugName: '',
        dayNum: '',
        number: ''
      },
      prescriptionList: [{name: '中药处方', id: 1}, {name: '西药/中成药处方', id: 2}, {name: '远程监测处方', id: 4}],
      tableData: [],
      listdata: {},
      showAddTradtionDialog: false,
      showAddWesternDialog: false,
      columnsWestern: [
        {
          label: '药品名称',
          prop: 'drugName',
          align: "center",
        }, {
          label: '规格',
          prop: 'standard',
          align: "center"
        }, {
          label: '数量',
          prop: 'dosageNum',
          align: "center",

        }, {
          label: '用法',
          prop: 'usageMethod',
          align: "center",

        }, {
          label: '频次',
          prop: 'frequency',
          align: "center",

        }, {
          label: '服用时间',
          prop: 'takingTime',
          align: "center",

        }, {
          label: '单次用量',
          prop: 'dayNum',
          align: "center",

        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 200
        }
      ],
      columnsTraditional: [
        {
          label: '药品名称',
          prop: 'drugName',
          align: "center",
        }, {
          label: '每剂数量',
          prop: 'dosageNum',
          align: "center",
          formatter: (row, cellValue) => {
            return row.dosageNum + row.unit
          },
        }, {
          label: '备注',
          prop: 'remark',
          align: "center",
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 200
        }
      ],
      prescriptionConfig: '',//处方配置数据
      diseaseList: [],
      index: 0,

      formModelRules: {
        prescriptionType: [{required: true, message: '请选择处方类型'}],
        doctorHospital: [{required: true, message: '请输入开方医生医院'}],
        doctorDepartment: [{required: true, message: '请输入开方医生科室'}],
        doctorName: [{required: true, message: '请输入开方医生姓名'}],
        openTime: [{required: true, message: '请选择开方时间'}],
        themeId: [{required: true, message: '请选择确诊病症'}],
        allergies: [{required: true, message: '请输入过敏史'}],
        diagnosticResult: [{required: true, message: '请输入临床诊断'}],
        number: [{required: true, message: '请输入总量'}],
        decoctionMethod: [{required: true, message: '请选择煎煮方式'}],
        dayNum: [{required: true, message: '请输入每日剂数'}],
        usageMethod: [{required: true, message: '请选择用法'}],
        frequency: [{required: true, message: '请选择频次'}],
        timeNum: [{required: true, message: '请输入每次用量'}],
        takingTime: [{required: true, message: '请选择服用时间'}],
        drugName: [{required: true, message: '请输入设备信息'}],
      },
    }
  },
  created() {
    this.getPrescriptionConfigList()//查询处方配置
    this.getDiseaseList()
    if (this.dataObj.optionType === 'edit') {
      //查看详情
      this.getNewPrescriptionDetail()
    }
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    //查询处方详情
    getNewPrescriptionDetail() {
      this.post(this.api.slowDisease.getNewPrescriptionDetail, {
        id: this.dataObj.prescriptionId
      }).then((res) => {
        if (res.data.code === '200') {
          this.submitData = Object.assign(this.submitData, res.data.object)
          this.submitData.doctorHospital = this.submitData.doctorDto.hospitalName
          this.submitData.doctorDepartment = this.submitData.doctorDto.departmentName
          this.submitData.doctorName = this.submitData.doctorDto.nickName

          //TODO 回显药品

          if (this.submitData.prescriptionType === 2) {
            //西药
            this.submitData.detailList.forEach(item => {
              let usagesData = JSON.parse(item.usagesData);
              this.$set(usagesData, 'drugName', item.drugName)
              this.$set(usagesData, 'id', item.drugId)
              this.tableData.push(usagesData)
            })
          } else if (this.submitData.prescriptionType === 1) {
            //中药
            this.tableData = this.submitData.detailList
            this.tableData.forEach(item => {
              this.$set(item, 'id', item.drugId)
            })
            let userData = JSON.parse(this.submitData.detailList[0].usagesData)
            this.submitData.number = userData.dosageUnit
            this.submitData.decoctionMethod = userData.decoctionMethod
            this.submitData.dayNum = userData.dayNum
            this.submitData.usageMethod = userData.usageMethod
            this.submitData.frequency = userData.frequency
            this.submitData.timeNum = userData.timeNum
            this.submitData.takingTime = userData.takingTime
          } else if (this.submitData.prescriptionType === 4) {
            this.submitData.dayNum = this.submitData.detailList[0].dayNum
            this.submitData.number = this.submitData.detailList[0].number
            this.submitData.remark = this.submitData.detailList[0].remark
            this.submitData.drugName = this.submitData.detailList[0].drugName
          }


        }
      })
    },
    //查询处方配置
    getPrescriptionConfigList() {
      this.post(this.api.slowDisease.getPrescriptionConfigList).then((res) => {
        if (res.data.code === '200') {
          this.prescriptionConfig = res.data.object
        }
      })
    },
    //查询所有慢病
    getDiseaseList() {
      this.post(this.api.slowDisease.getChronicTheme).then((res) => {
        if (res.data.code === '200') {
          this.diseaseList = res.data.object
        }
      })
    },
    handleChangeType() {
      this.tableData = [];
      this.submitData.detailList = []
      this.submitData.number = ''
      this.submitData.dayNum = ''
    },
    //接收数据
    handleResultData(data) {
      if (this.listdata.isEdit) {
        //编辑
        this.$set(this.tableData, this.index, data)
      } else {
        //新增
        this.$set(data, 'drugId', data.id)
        this.tableData.push(data)
      }
    },
    handleOption(op, row, index) {
      switch (op) {
        case 'addTradition':
          //新增中药
          this.showAddTradtionDialog = true
          this.listdata.isEdit = false
          break
        case 'editTradition':
          //编辑中药
          this.showAddTradtionDialog = true
          this.listdata = row
          this.listdata.isEdit = true
          this.index = index
          break
        case 'delTradition':
          //删除中药
          this.tableData.splice(index, 1)
          break
        case 'addWestern':
          //新增西药
          this.showAddWesternDialog = true
          this.listdata.isEdit = false
          break
        case 'editWestern':
          //编辑西药
          this.showAddWesternDialog = true
          this.listdata = row
          this.listdata.isEdit = true
          this.index = index
          break
        case 'delWestern':
          //删除西药
          this.tableData.splice(index, 1)
          break
        case 'save':
          this.$refs.formModelRef.validate(valid => {
            if (valid) {
              if (this.tableData.length === 0 && this.submitData.prescriptionType !== 4) {
                this.$message.warning('请添加药品')
              } else {
                if (this.submitData.prescriptionType === 1) {
                  let obj = {
                    dosageUnit: this.submitData.number,
                    decoctionMethod: this.submitData.decoctionMethod,
                    dayNum: this.submitData.dayNum,
                    usageMethod: this.submitData.usageMethod,
                    frequency: this.submitData.frequency,
                    timeNum: this.submitData.timeNum,
                    takingTime: this.submitData.takingTime,
                    drugType: this.submitData.drugType,
                  }
                  let usagesData = JSON.stringify(obj)
                  let usages = '用法:每次' + this.submitData.timeNum + this.submitData.number + " " + this.submitData.frequency + " 每天" + this.submitData.dayNum + "次 " + this.submitData.decoctionMethod + " " + this.submitData.usageMethod
                  this.tableData.forEach(item => {
                    this.$set(item, 'dosageUnit', this.submitData.number)
                    this.$set(item, 'decoctionMethod', this.submitData.decoctionMethod)
                    this.$set(item, 'dayNum', this.submitData.dayNum)
                    this.$set(item, 'usageMethod', this.submitData.usageMethod)
                    this.$set(item, 'frequency', this.submitData.frequency)
                    this.$set(item, 'timeNum', this.submitData.timeNum)
                    this.$set(item, 'takingTime', this.submitData.takingTime)
                    this.$set(item, 'drugType', this.submitData.prescriptionType)
                    this.$set(item, 'numberUnit', '剂')
                    this.$set(item, 'usagesData', usagesData)
                    this.$set(item, 'usages', '用法:每次' + this.submitData.timeNum + item.unit + " " + this.submitData.frequency + " 每天" + this.submitData.dayNum + "次 " + this.submitData.decoctionMethod + " " + this.submitData.usageMethod)
                  })
                  this.submitData.detailList = this.tableData
                } else if (this.submitData.prescriptionType === 2) {
                  this.tableData.forEach(item => {
                    let obj = {
                      dosageNum: item.dosageNum,
                      frequency: item.frequency,
                      dayNum: item.dayNum,
                      standard: item.standard,
                      takingTime: item.takingTime,
                      usageMethod: item.usageMethod,
                      drugType: this.submitData.drugType,
                    }
                    this.$set(item, 'dosageNum', item.dosageNum)
                    this.$set(item, 'frequency', item.frequency)
                    this.$set(item, 'dayNum', item.dayNum)
                    this.$set(item, 'standard', item.standard)
                    this.$set(item, 'takingTime', item.takingTime)
                    this.$set(item, 'usageMethod', item.usageMethod)
                    this.$set(item, 'drugType', this.submitData.prescriptionType)
                    this.$set(item, 'numberUnit', '剂')
                    this.$set(item, 'usagesData', JSON.stringify(obj))
                    this.$set(item, 'usages', '用法:每次' + item.dayNum + item.unit + " " + item.frequency + " 每天" + item.dayNum + "次 " + item.usageMethod)
                  })
                  this.submitData.detailList = this.tableData
                } else if (this.submitData.prescriptionType === 4) {
                  let obj = {
                    remark: this.submitData.remark,
                    numberUnit: '天',
                    unit: '次',
                    dayNum: this.submitData.dayNum,
                    drugName: this.submitData.drugName,
                    number: this.submitData.number,
                  }
                  this.submitData.detailList.push(obj)
                }

                this.post(this.api.slowDisease.transform, this.submitData).then((res) => {
                  if (res.data.code === '200') {
                    this.$message.success('转换成功')
                    this.$parent.getList()
                    this.modalClose()
                  }
                })

              }

            }
          })
          break
      }
    },
    // 时间转换
    formatterDate(time) {
      if (time)
        return this.commonFunction.timestampFormat(new Date(time), 'yyyy-MM-dd hh:mm')
      else
        return ''
    },
  },
  components: {
    'element-table': ElementTable,
    'add-tradition-dialog': addTraditionalDialog,
    'add-western-dialog': addWesternDialog,
  },
}
</script>

<style scoped>

</style>
